<template>
  <transition name="confirm-fade">
    <div>
      <div v-if="show" class="my-confirm">
        <div class="confirm-content-wrap">
          <div class="modal-ok">是否确认操作</div>
          <div class="my-operation" style="text-align:center">
            <!-- <ButtonGroup> -->
            <el-button type="error" @click="cancel()">取消</el-button>
            <el-button type="primary" @click="ok(methods, data)" class="ml10">确定</el-button>
            <!-- </ButtonGroup> -->
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: '',
  components: {

  },
  props: {

  },
  data () {
    return {
      show: false, // 显隐
      methods: '', // 方法名字
      data: [], // 数据
    }
  },
  created () {

  },
  mounted () {
  },
  methods: {
    init (methods, data) {
      this.show = true
      this.methods = methods
      this.data = data
      this.isShowConfirm = true
    },
    cancel () {
      this.show = false
    },
    ok (methods, data) {
      eval('this.$parent.' + methods + '(data)')
      this.show = false
    }
  },
  computed: {

  }
}
</script>
<style scoped>
.my-confirm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}
/* 进入和出去的动画 */
.confirm-fade-enter-active {
  animation: opacity 0.3s;
}
.confirm-fade-enter-active .confirm-content-wrap {
  animation: scale 0.3s;
}
.confirm-fade-leave-active {
  animation: outOpacity 0.2s;
}
/* 包裹层容器样式 */
.confirm-content-wrap {
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  width: 280px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 5px;
  z-index: 999;
  user-select: none;
}
/* 进来的动画 */
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 出去的动画 */
@keyframes outOpacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 底部按钮样式 */
.my-operation {
  /* display: flex; */
  border-top: 1px solid #eee;
  margin-top: 15px;
  padding-top: 15px;
  margin-bottom: 15px;
}
</style>
